<template>
  <div v-if="device !== 'mobile'" class="pc">
    <myCreateProject ref="myCreateProject" :query="query"></myCreateProject>
  </div>
  <div v-else class="phone">
    <van-nav-bar
      title="项目管理"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="18" @click="open()" />
      </template>
    </van-nav-bar>

    <myCreateProjectMobile
      ref="myCreateProject"
      :queryParams="queryParams"
      :query="queryParams"
      style="margin-top: 50px"
    ></myCreateProjectMobile>

    <searchDialog
      ref="searchDialog"
      @getList="getList"
    />
  </div>
</template>


<script>
import { mapGetters } from "vuex";
import myCreateProject from "./pc/myCreateProject.vue";
import searchDialog from "@/views/crm/project/components/mobile/searchDialog.vue";

import myCreateProjectMobile from "./mobile/myCreateProjectMobile.vue";

export default {
  components: {
    myCreateProject,
    searchDialog,
    myCreateProjectMobile,
  },
  data() {
    return {
      activeName: "myCreateProject",
      active: "myCreateProject",
      projectId: "",
      queryParams: {},
      tabbarActive: 0,
      query: {},
    };
  },
  computed: {
    ...mapGetters(["device", "name"]),
  },
  created() {
    this.query = this.$route.query.queryParams
    if (this.$route.query.projectId) {
      this.projectId = this.$route.query.projectId;
    }

    this.$nextTick(() => {
      this.$refs[this.activeName].getData();
    });
  },
  methods: {
    handleClick(tab, event) {
      this.$nextTick(() => {
        this.$refs[this.activeName].getData();
      });
    },
    onClickLeft() {
      this.$router.push("/");
    },

    open() {
      this.$refs.searchDialog.open();
    },

    getList(queryParams) {
      this.queryParams = queryParams;
      this.queryParams = { ...this.queryParams, ...this.query };
      this.$nextTick(() => {
        this.$refs[this.active].handleQuery();
      });
    },
  },
};
</script>


<style lang="scss" scoped>
::v-deep .el-drawer {
  width: 65% !important;
}
</style>